<template>

</template>

<script>
  import { _deepClone } from '@/utils'

  export default {
    name: 'HandleChooseDialog',
    data() {
      return {
        isRequest: false,
        treeLoading: false,
        treeData: [],
        listLoading: false,
        currentNodeKey: '',//树节点初始化展示选中id
        allList: [],
        total: 0,//全部列表数据总数
        queryForm: {
          pageNum: 1,
          pageSize: 10
        },//全部列表数据查询条件
        isCheckValue: '',//单选时选中某条数据绑定值
        selectRow: null,//单选时选中某条数据对象
        key: '',//键名
        selectListLoading: false,//已选择列表loading
        selectedData: [],//已选择列表
        selectedDeleteValue: '',//已选择列表中选中的数据
        tempData: [],//临时存储已选择列表数据
        tempSelectedData: [],//存储全部列表中手动选择的数据
        isClosed: true,
        isChange: true
      }
    },
    methods: {
      handleList() {
        this.listLoading = true
        this.isRequest = true
        this.getList().then(({ list, total }) => {
          this.allList = list
          this.total = total
        }).finally(() => {
          this.listLoading = false
          this.isRequest = false
        })
      },

      handleSelectedList() {
        this.selectListLoading = true
        this.getSelectedList().then(res => {
          this.tempData = _deepClone(res)
          this.selectedData = _deepClone(res)
        }).catch(err => {
          this.selectedData = []
          // 统一异常处理
        }).finally(() => {
          this.selectListLoading = false
        })
      },

      handleTreeList() {
        this.treeLoading = true
        this.allList = []
        this.listLoading = true
        this.getTreeList().then(res => {
          this.treeData = res
          this.currentNodeKey = this.treeData[0].id || this.treeData[0].key || this.treeData[0].value
          // console.log(this.currentNodeKey)
        }).catch(err => {
          // 统一异常处理
        }).finally(() => {
          this.treeLoading = false
        })
      },

      //树节点点击事件
      handleNodeClick(info) {
        this.queryForm.pageNum = 1
        this.queryForm.pageSize = 10
        this.setQueryForNode(info)
        this.handleList()
      },

      //筛选查询
      handleQuery() {
        this.queryForm.pageNum = 1
        this.queryForm.pageSize = 10
        this.handleList()
      },
      //筛选条件重置
      resetQuery() {
        this.resetForm()
      },
      resetForm() {
        if (this.$refs.queryForm) {
          this.$refs.queryForm.resetFields()
        }
      },
      //单选点击事件
      changeRadio() {
        if (this.key) {
          this.selectRow = this.allList.find(item => item[this.key] === this.isCheckValue)
        }
      },

      //修改列表每行复选框状态
      changeRowSelection() {
        this.isChange = false;
        this.$nextTick(() => {
          this.allList.forEach(item => {
            if (this.selectedData.find(v => v[this.key] === item[this.key])) {
              this.$refs.unSelectList.$refs.table.toggleRowSelection(item, true)
            }
          })
          this.isChange = true;
        })
      },

      //全部列表中去掉复选框选中（即删除已选择人）
      selectionRow(info) {
        // console.log(info)
        if (info.data) {
          let row = info.data
          this.handleDelete(row)
        }
      },
      //已选择列表中选中数据
      handleSelectForDel(val) {
        this.selectedDeleteValue = val.map(item => item[this.key]).join(',')
      },
      //多选框删除已选中数据
      handleDelete(row) {
        let ids = row?.[this.key] || this.selectedDeleteValue
        this.selectedData = this.selectedData.filter(item => !ids.includes(item[this.key]))
        this.selectedDeleteValue = ''
      },

      //table复选框选中事件
      handleSelectionChange(val) {
        //防止修改数据复选状态时调该方法
        if(!this.isChange) return

        if (val.length) {
          val.forEach(item => {
            if (!this.selectedData.find(f => f[this.key] === item[this.key])) {
              this.selectedData.push(item)
            }
          })
          let keys = this.allList.map(item => item[this.key])

          keys.forEach(item => {
            if (!val.find(f => f[this.key] === item) && this.selectedData.find(f => f[this.key] === item)) {
              let index = this.selectedData.findIndex(f => f[this.key] === item)
              this.selectedData.splice(index, 1)
            }
          })
        } else {
          let keys = this.allList.map(item => item[this.key])
          this.selectedData = this.selectedData.filter(item => !keys.includes(item[this.key]))
        }
      },

      /**
       * 根据树节点属性修改列表查询条件
       */
      setQueryForNode() {

      },
      /**
       * 弹窗提交事件
       */
      submitForm() {
        this.submit()
        if (this.isClosed) {
          this.$refs.ChooseDialog.cancel()
        }
      },
      submit() {
        this.isClosed = true
      },
      /**
       * 获取列表数据方法
       * @returns {Promise<unknown>}
       */
      getList() {
        return new Promise((resolve, reject) => {
          reject('请复写获取列表数据的方法')
        })
      },
      /**
       * 获取菜单树型数据
       * @returns {Promise<unknown>}
       */
      getTreeList() {
        return new Promise((resolve, reject) => {
          reject('请复写获取详情数据的方法')
        })
      },
      /**
       * 获取已选择数据方法
       * @returns {Promise<unknown>}
       */
      getSelectedList() {
        return new Promise((resolve, reject) => {
          reject('请复写获取详情数据的方法')
        })
      }
    }
  }
</script>

<style scoped>

</style>
